<template>
	<ul class="word-list">
		<li 
		class="item" 
		v-for="item in letters" 
		:key="item"
		@touchstart="handleTouchStart"
		@touchmove="handleTouchMove"
		@touchend="handleTouchEnd"
		@click="handleLetterClick"
		:ref="item"
		>
		{{item}}
		</li>
		
	</ul>
</template>
<script>
export default{
	props:{
		cities:Object
	},
	computed:{
		letters(){
			const letters=[];
			for(let i in this.cities){
				letters.push(i)
			}
			return letters;
		}
	},
	data(){
		return{
			touchStatus:false,
			timer:null
		}
	},
	methods:{
		handleLetterClick(e){
			this.$emit('change',e.target.innerText);
		},
		handleTouchStart(){
			this.touchStatus=true
		},
		handleTouchMove(e){
			if(this.touchStatus){
				if(this.timer){
					clearTimeout(this.timer)
				}
				this.timer=setTimeout(()=>{
					const startY=this.$refs['A'][0].offsetTop;
					const touchY=e.touches[0].clientY-84;
					const index=Math.floor((touchY-startY)/20);
					if(index>=0 && index<this.letters.length){
						this.$emit('change',this.letters[index]);
					}
				},16)
				
			}
		},
		handleTouchEnd(){
			this.touchStatus=false
		}
	}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/base.scss';
.word-list{
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	top:px2rem(110px);
	right: 0;
	bottom: 0;
	width:px2rem(20px);
}
.item{
	line-height: px2rem(20px);
	text-align: center;
	color:$bgColor;
}
</style>